<!-- eslint-disable vue/no-dupe-keys -->
<template>
  <div class="home">
    <!--双大括号表示文本插，大括号中的内容发生改变的时候，会自动更新-->
    <!--大括号中的内容是文本内容不是html如果想插入html需要使用v-html-->
    <p>{{ publishedBooksMessage }}</p>

    <!--当前的publishedBooksMessage就为html-->
    <p>你好，<span v-html="publishedBooksMessage" style="color: red;"></span></p>

    <!--属性绑定 v-bind 简写:-->
    <button :disabled="buttonDisabled">绑定按钮</button>

    <!--可以为一个对象绑定多个属性-->
    <div v-bind="myDivAttrs">mydiv</div>

    <!--双括号表达式-->
    <p>{{ 1+1 }}</p>

    <!--``里面的内容为文本${}里面的内容为表达式-->
    <p>{{ `list-${1+1}` }}</p>

    <!--v-if指令 为true的时候才显示 如果为false就移除该元素-->
    <p v-if="myIfFlag">myIfFlag为true 显示</p>

    <!--v-on指令 简写@ 用来监听DOM事件比如鼠标点击按钮点击之类的-->
    <button @click="spanClick">点击次数：{{ clickCount }}</button>

    <!--注意 @click.prevent 这种函数就表示阻止默认行为 比如submit.prevent表示阻止默认提交表单行为只执行回调函数-->

    <!--动态参数 []-->
    <p :[attrName]="attrValue">动态参数</p>

    <!--计算属性的调用 避免在表达式中写-->
    <!--比较methods和computed computed可以当做属性使用,可以修改 method是作为方法来
    使用也可以获取值 返回return
    computed有getter和setter进行赋值,method不行 computed如果数据不变的话数据可以进行缓存 method在页面中你使用了多少次就会调用多少次-->
    <p>数组个数:{{ count() }}</p>
    <p>数组个数:{{ publishedBooksMessage }}</p>

    <!--class 和style 绑定 只显示myclass-->
    <p :class="{myClass: true, myClass2: false}">class</p>
    <!--class="my myclass" 显示的类就是-->
    <p class="my" :class="{myclass:true,myClass2:false}">class2</p>

    <p :style="{'font-size': fontSize+'px'}">你好</p>
    <!--设置字体大小-->
    <input v-model="fontSize" type="range" min="10" max="50"/>
    <br/>
    <!--条件渲染-->
    <button @click="myGender = !myGender">切换性别</button>
    <p>我的性别：
      <span v-if="myGender">男</span>
      <span v-else>女</span>
    </p>
    <li v-for="item in books" :key="item">{{ item }}</li>
    <!--使用v-show的话也可以进行渲染 但是如果为false该元素不会移除 会添加上display属性-->
    <!--需要频繁切换的话使用v-show 如果条件很少改变v-if更合适-->

    <!--表单渲染 表单输入绑定 v-model-->
    <input type="checkbox" v-model="checked" id="666"/>
    <label for="666">{{ checked }}</label>
    <br/>
    <!--for属性规定label与哪个表单元素绑定 label标签是专门为input元素服务的-->
    <!--隐式绑定-->
    <label>Date of Birth: <input type="text" name="DofB" /></label>
    <!--显示绑定-->

    <!--v-model修饰符
      lazy 每次change事件触发后才更新inputMsg的值
      number 为数字类型
      trim 去除空格
    -->
    <p>输入内容：{{ inputMsg }}</p>
    <input v-model.lazy="inputMsg"/>
    <!--侦听属性-->
    <p>侦听内容：{{ watchInput }}</p>

    <p>侦听内容判断：
      <span v-html="watchCheckMsg" :style="{'color': watchCheck ?'blue':'red'}"></span>
       正确值：100</p>
    <input v-model.number.lazy="watchInput" type="number" />
    <h1>{{ title }}</h1>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  props: ['title'],
  data () {
    return {
      // 侦听判断
      watchCheck: false,
      // 书籍列表
      // 侦听输入
      watchInput: 0,
      // 输入框
      inputMsg: '',
      // 复选框
      checked: true,
      // 男
      myGender: true,
      // 字体大小
      fontSize: 10,
      // 动态参数名称
      attrName: 'class',
      // 动态属性
      attrValue: 'myClass',
      // 按钮的点击次数
      clickCount: 0,
      // if指令
      myIfFlag: true,
      // 如果设置true的话按钮就不能点击了 disabled为按钮的属性
      buttonDisabled: true,
      // 自定义对象属性
      myDivAttrs: {
        id: 1,
        class: 'myDiv',
        style: {
          color: 'red'
        }
      },
      // books: [],
      books: [
        'Vue 2 - Advanced Guide',
        'Vue 3 - Basic Guide',
        'Vue 4 - The Mystery'
      ]
    }
  },
  methods: {
    count () {
      return this.books.length
    },
    spanClick () {
      console.log('点击按钮触发了')
      // this 表示当前组件的实例对象 数据的属性可以被更改
      this.clickCount++
    },
    init () {
      console.log('init')
    }
  },
  // 组件完成初始渲染并创建 DOM 节点后运行
  mounted () {
    this.init()
    console.log(this.$refs.input.focus())
  },
  // 计算属性
  computed: {
    publishedBooksMessage () {
      return this.books.length
    },
    watchCheckMsg () {
      return this.watchCheck ? '正确' : '错误'
    }
  },
  watch: {
    watchInput (newValue, oldValue) {
      console.log('watchInput', newValue, oldValue)
      if (newValue === 100) this.watchCheck = true
    }
  },
  created: {

  }
}
</script>
